<template>
  <div class="widgetContiner">
    <!--中间显示界面 -->
    <!-- @dblclick.enter.stop="openSettingModel()" -->
    <a-form-item
      style="border: none; padding: 0px"
      class="widget-view"
      v-if="element && element.key"
      :class="{
        active: selectWidget.key == element.key,
      }"
      @click.capture.stop="handleSelectWidget(index)"
      @dblclick.enter.stop="openSettingModel()"
    >
      <panel
        :headhidden="!element.options.panel"
        :title="element.options.panelTitle"
        :bodyPadding="'10px ' + element.options.panelPadding + 'px'"
        :clickFlag="false"
      >
        <template v-if="element.type == 'table'">
          <Ftable :setting="element"></Ftable>
        </template>
        <template v-else-if="element.type == 'echart'">
          <template v-if="element.options.type == 'line'">
            <Fline :setting="element"></Fline>
          </template>
          <template v-else-if="element.options.type == 'column'">
            <Fcolumn :setting="element"></Fcolumn>
          </template>
          <template v-else-if="element.options.type == 'pie'">
            <Fpie :setting="element"></Fpie>
          </template>
          <template v-else-if="element.options.type == 'liquid'">
            <Fliquid :setting="element"></Fliquid>
          </template>
          <template v-else-if="element.options.type == 'wordCloud'">
            <FwordCloud :setting="element"></FwordCloud>
          </template>
        </template>
        <template v-else-if="element.type == 'tagGroup'">
          <FtagGroup :setting="element"></FtagGroup>
        </template>
        <template v-else-if="element.type == 'button'">
          <Fbutton :setting="element"></Fbutton>
        </template>
        <template v-else-if="element.type == 'alert'">
          <Falert :setting="element"></Falert>
        </template>
        <template v-else-if="element.type == 'pageHeader'">
          <Fnavcrumb :setting="element"></Fnavcrumb>
        </template>
      </panel>
    </a-form-item>

    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
      <DragOutlined />
    </div>

    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <span @click.stop="handleWidgetDelete(index)"><DeleteOutlined /></span>

      <span @click.stop="handleWidgetClone(index)"><SnippetsOutlined /></span>
    </div>
  </div>
</template>

<script>
  import { getGuid } from '@/utils/util'

  import {
    DeleteOutlined,
    SnippetsOutlined,
    DragOutlined,
  } from '@ant-design/icons-vue'

  import {
    Fpie,
    Fcolumn,
    Fline,
    Ftable,
    FwordCloud,
    Fliquid,
    FtagGroup,
    Fbutton,
    Falert,
    Fnavcrumb
  } from '@/mycomponents/dataComponent/index'
  export default {
    components: {
      SnippetsOutlined,
      DeleteOutlined,
      Fpie,
      Fcolumn,
      Fline,
      Ftable,
      FwordCloud,
      Fliquid,
      DragOutlined,
      FtagGroup,
      Fbutton,
      Falert,
      Fnavcrumb
    },
    props: ['element', 'select', 'index', 'widgetForm'],

    data() {
      return {
        data: this.widgetForm,
        selectWidget: this.select,
      }
    },

    methods: {
      handleSelectWidget(index) {
        //  console.log('点击事件', index)
        this.selectWidget = this.data.list[index]
      },
      openSettingModel() {
        this.$emit('openSetting', true)
      },

      handleWidgetDelete(index) {
        if (this.data.list.length - 1 === index) {
          if (index === 0) {
            this.selectWidget = {}
          } else {
            this.selectWidget = this.data.list[index - 1]
          }
        } else {
          this.selectWidget = this.data.list[index + 1]
        }

        this.$nextTick(() => {
          this.data.list.splice(index, 1)
        })
      },
      handleWidgetClone(index) {
        const key = getGuid()
        let cloneData = {
          ...this.data.list[index],
          options: {
            ...this.data.list[index].options,
          },
          key,
        }
        this.data.list.splice(index, 0, cloneData)

        this.$nextTick(() => {
          this.selectWidget = this.data.list[index + 1]
        })
      },
    },
    watch: {
      select(val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler(val) {
          this.$emit('update:select', val)
        },
        deep: true,
      },
    },
  }
</script>

<style>
  .widgetContiner .ant-form-item-control-wrapper {
    width: 100%;
  }
</style>
